<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/agent/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/agent/css/shenpi.css"/>
    <script type="text/javascript" src="/agent/js/jquery.1.9.1.js" ></script>
    <script type="text/javascript" src="/agent/js/rem.js" ></script>
    <script type="text/javascript" src="/agent/js/swiper.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/agent/css/swiper-3.4.2.min.css" />
    <title>对接人-我审批的</title>
</head>
<script>
  $(function() {
    var winHeight = $(window).height();
    $(".mask").css("height", winHeight);
    $(".mask .container").css("margin-top", winHeight / 3);
    $(".tupian .swiper-slide").click(function(){
      $(".mask").show();
    });
    $(".cha").click(function(){
      $(".mask").hide();
      window.location.reload();
    });
  });
</script>
<body>
<div class="top">
    <img src="{$agent.picture}"/>
    <span>{$agent.agent_name}</span>
    <span class="ing">{$order.status_text}</span>
</div>
<!--订单列表-->
<div class="order_list">
    <h2>
        <span>订货单号：{$order.nb}</span>
    </h2>
    {volist name="orderItem" id="vo"}
    <div class="order_list_goods">
        <dl>
            <dt>
                <img src="{$vo.preproductimg_text}">
            </dt>
            <dd class="name">
                <strong>{$vo.preproductname_text}</strong>

            </dd>
            <dd class="pice">￥{$vo.unit_price}<em>x{$vo.num}</em></dd>
        </dl>
    </div>
    {/volist}
</div>
<!--付款凭证-->
<div class="pay">
    {if $order.image}
    <h2>付款凭证</h2>
    <div class="container pay_img">
        <div class="swiper-container swiper1">
            <div class="swiper-wrapper">
                {volist name="order.image" id="vo"}
                <div class="swiper-slide">
                    <img src="/agent/upload/{$vo}"/>
                </div>
                {/volist}
            </div>
        </div>
    </div>
    {/if}
    <p>共{:count($orderItem)}件商品&nbsp;&nbsp;&nbsp;合计：<span style="color: #f3494c;">¥{$order.order_price}</span></p>
</div>
<!--收货地址-->
<div class="shou">
    <h2><img class="dizhi" src="/agent/img/address.png"/>&nbsp;收货地址</h2>
    <div class="name2">
        收货人：{$agent.warehouse.name} &nbsp;&nbsp;&nbsp;
        {$agent.warehouse.tel}
    </div>
    <div class="address">
        <img class="dizhi" src="/agent/img/address.png"/>
        <p>收货地址：{$agent.warehouse.province_text}{$agent.warehouse.city_text}{$agent.warehouse.area_text}{$agent.warehouse.address}</p>
    </div>
</div>
<!--审批流程-->
<div class="liucheng">
    <h2>审批流程</h2>
    <ul>
        {volist name="$flowinfo.log" id="vo"}
        <li>
            <div class="left-border">
                <i class="{if $vo.btn_value == 'Send' || $vo.btn_value == 'ok'} second {else}first {/if}"></i>
            </div>
            <div class="shen-left">
              <div class="shen-info">
                <img src="{$vo.user_img}"/> 
                <em class="agent-name">{$vo.user}</em>
                	<em class="agree" style="{if $vo.btn_value == 'Send' || $vo.btn_value == 'ok'} color: #2abf40; {else}color: #f3494c; {/if}"><em style="color: #888;">·</em>{$vo.btn}</em>
              </div>
                {if $vo.content}
                <p class="shen-beizhu">“{$vo.content}”</p>
                {/if}
                
            </div>
            <span>{:date('m/d  H:i',$vo['dateline'])}</span>
        </li>
        {/volist}
        <li>
            <div style="height: 0.2rem;margin-left: -1px;"><i class="third"></i></div>
            <img src="{$admin.avatar}"/> {$admin.username}•审批中
            <span></span>
        </li>
    </ul>
</div>
<!--审批意见-->
<form action="{:url('do_check_save')}" method="post" name="form" id="forms">
    <input type="hidden" value="{$info.wf_title}" name="wf_title"> <!--同意必须-->
    <input type="hidden" value="{$info.wf_fid}" name="wf_fid"> <!--同意必须-->
    <input type="hidden" value="{$info.wf_type}" name="wf_type"> <!--同意必须-->
    <input type="hidden" value="{$flowinfo.flow_id}" name="flow_id"> <!--同意必须-->
    <input type="hidden" value="{$flowinfo.flow_process}" name="flow_process"> <!--同意必须-->
    <input type="hidden" value="{$flowinfo.run_id}" name="run_id" id='run_id'> <!--同意必须-->
    <input type="hidden" value="{$flowinfo.run_process}" name="run_process"> <!--同意必须-->
    {if condition='$flowinfo.status.wf_mode != 2'}
    <input type="hidden" value="{$flowinfo['nexprocess']['id']}" name="npid"> <!--同意必须-->
    {else/}
    <input type="hidden" value="{$flowinfo.process.process_to}" name="npid"> <!--同意必须-->
    {/if}
    <input type="hidden" value="{$flowinfo.wf_mode}"  name="wf_mode"> <!--同意必须-->
    <input type="hidden" value="{$_GET['sup'] ?? ''}" name="sup"> <!--可选 1=管理员代审-->
    <input type="hidden" value="" name="btodo"> <!---->
    <input type="hidden" value="1" name="row[deliverystatus]"> <!--发货状态 已发货-->
    {if condition='$flowinfo.nexprocess.auto_person != 3'}
    <!--{$flowinfo['nexprocess']['process_name']}({$flowinfo['nexprocess']['todo']})-->
    {else/}
    {volist name='$flowinfo.nexprocess.todo.ids' id='todo' offset="1" length='1'}
    <input type="hidden" name="todo" value="{$todo}*%*{$flowinfo['nexprocess']['todo']['text'][$key]}"><!--同意必须-->
    {/volist}
    {/if}
    <div class="ideas">
        <h2>审批意见</h2>
        <textarea id="check_con" name="check_con" datatype="*" placeholder="请输入…"></textarea> <!--同意必须-->
    </div>
    <!--物流-->
    <ul class="wuliu">
        <li>物流公司
            <select id="express" name="row[express_id]">
                <option value="">请选择</option>
                {volist name='express' id='data'}
                <option value="{$data.id}">{$data.name}</option>
                {/volist}
            </select>
        </li>
        <li>发货仓库
            <select id="githouse" name="git[githouse]">
                <option value="">请选择</option>
                {volist name='githouse' id='data'}
                <option value="{$data.id}">{$data.gname}</option>
                {/volist}
            </select>
        </li>
        <li>物流费用
            <input id="price" type="number" name="row[express_price]" value="" placeholder="请输入物流费用" />
        </li>
        <li>物流单号
            <input id="express_num" type="text" name="row[express_num]" value="" placeholder="请输入物流单号" />
        </li>
    </ul>
    <div class="wuliu_info">
        <h2>物流信息</h2>
        <textarea id="info" name="row[express_info]" placeholder="请填写物流信息"></textarea>
    </div>
    <input id='submit_to_save' name='submit_to_save' value='' type='hidden'>
    <input  name='sing_st' value='{$flowinfo.sing_st}' type='hidden'><!--同意必须-->
    <input  name='art' value='' type='hidden'><!--同意必须-->
    <div class="button{$flowinfo.process.is_back == 2 ? '2': '1'}">
        <div class="agree" id='nexbton' onclick='tj("ok")' >同意</div>
        {if condition='$flowinfo.process.is_back == 2'}
        <input type="hidden" name="wf_backflow" value="0">
        <div class="bohui" id='backbton' onclick='tj("back")'value='back' >驳回</div>
        {/if}
    </div>
</form>
<!--Swiper-->
<div class="swiper-container myswiper" id="origin-img">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
    <div class="upload"></div>
</div>
<script>

  //同意 驳回
  function tj(val) {
    $('#submit_to_save').val(val);
    if(val == 'back')
    {
      if($('#check_con').val() == '')
      {
        alert('请添加驳回理由');
        return false;
      }
    }
    if($('#express').val() == '')
    {
      alert('请选择物流');
      return false;
    }
    if($('#githouse').val() == '')
    {
      alert('请选择要发货的仓库');
      return false;
    }
    if($('#price').val() == '')
    {
      alert('请添加物流费用');
      return false;
    }
    if($('#express_num').val() == '')
    {
      alert('请添加物流单号');
      return false;
    }
    $('#forms').submit();
  }
  //点击图片变大
  //判断图片是否为放大状态 放大是true 否则为false
  var swiperStatus = false;
  var swiper = new Swiper('.myswiper', {
    zoom: true,
    width: window.innerWidth,
    virtual: true,
    spaceBetween: 20,
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
    },
    on: {
      //放大后轮播图点击
      click: function() {
        //遮罩层消失
        $('#origin-img').fadeOut('fast');
        //清空遮罩层的内容
        this.virtual.slides.length = 0;
        this.virtual.cache = [];
        //标记为未放大状态
        swiperStatus = false;
      },
    },
  });
  //点击页面中轮播图图片
  $(document).delegate(".swiper1 img", "click", function() {
    //获取到当前点击的是第几张图片
    clickIndex = $(this).parent().index();
    //获取图片的外层div,因为外层轮播的图片循环的是这个div
    var imglist = $(this).parents(".swiper1").find(".swiper-slide")
    $(imglist).each(function(i, v) {
      console.log($(v).find("img").attr("src"))
      //获取当前点击图片的图片地址
      var imgs = $(v).find("img").attr("src")
      //将图片地址画入swiper中
      swiper.virtual.appendSlide('<div style="background:#000;" class="swiper-zoom-container"><img src="' + imgs + '" /><div class="cha">×</div></div>');
    })
    //根据当前点击的图片位置让放大的图片定位到第几张图片
    swiper.slideTo(clickIndex);
    //遮罩层弹出
    $('#origin-img').fadeIn('fast');
    //标记为放大状态
    swiperStatus = true;
  });
  //切换图状态禁止页面缩放
  document.addEventListener('touchstart', function(event) {
    if(event.touches.length > 1 && swiperStatus) {
      event.preventDefault();
    }
  });
  var lastTouchEnd = 0;
  document.addEventListener('touchend', function(event) {
    var now = (new Date()).getTime();
    if(now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false)
  document.addEventListener('touchmove', function(e) {
    if(swiperStatus) {
      e.preventDefault();
    }
  });
</script>
</body>
</html>
